Windows系统下搭建React Native环境

作者 拓荒 日期 2017-05-24
React Native

一、开发环境搭建要求

在Windows操作系统搭建React Native开发环境要求在电脑上安装好JDK,Android SDK,还要求电脑上安装有一套C++编译器，如果没有，推荐安装微软的VIsual Studio Community 2015 Android的开发环境Android Studio(推荐)或者Eclipse在混合开发中也需要用到

二、环境搭建步骤

第一步：安装JDK

1.安装JAVA JDK（需安装1.8或更高版本）

去Oracle的官网上下载安装包http://www.oracle.com/technetwork/java/javase/downloads/index.html 然后安装。第一次是安装 jdk ，第二次是安装 jre 。建议两个都安装在同一个java文件夹中的不同文件夹中。

2.JDK环境变量配置

(1)选择 计算机→属性→高级系统设置→高级→环境变量

(2)系统变量→新建 JAVA_HOME 变量 。变量值填写jdk的安装目录（我的是 D:\Program Files\Java\jdk1.8.0_131)

(3)系统变量→寻找 Path 变量→编辑,在变量值最后输入%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;

(4)系统变量→新建 CLASSPATH 变量。变量值填写.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar（注意最前面有一点）

(5)检验是否配置成功 运行cmd 输入 java -version （java 和 -version 之间有空格）。若如图所示 显示版本信息 则说明安装和配置成功。

PS C:\Users\tuohuang>  java -version
java version "1.8.0_131"
Java(TM) SE Runtime Environment (build 1.8.0_131-b11)
Java HotSpot(TM) 64-Bit Server VM (build 25.131-b11, mixed mode)

第二步：安装Android环境

我们先去Google的开发者网站https://developer.android.google.cn/studio/index.html 上下载Android Studio。

安装完成后，在Android Studio的欢迎界面中选择Configure => SDK Manager。
在SDK Platforms窗口中，选择Show Package Details，然后勾选Android 6.0下的Google APIs，Android SDK Platform 23，Intel x86 Atom_64 System Image还有Google APIs Intel x86 Atom_64 System Image。
SDK Platforms
在SDK Tools窗口中，选择Show Package Details，然后在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1。（必须是这个版本）
SDK Tools
ANDROID_HOME环境变量
确保ANDROID_HOME环境变量正确地指向了你安装的Android SDK的路径。
打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建
我的路径是：D:\Android\sdk（安装Android Studio的时候可以自己选择路径）;然后PATH增加如下内容 %ANDROID_HOME%\platforms;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools;
设置完成后将手机与电脑通过数据线相连。（打开开发者调试模式）在命令行窗口输入“adb devices”如果手机上已经安装了正确的驱动程序并且打开了调试模式，则会显示你已经连接的设备：

PS C:\Users\tuohuang> adb devices
List of devices attached
192.168.25.101:5555     device

第三步：其他环境配置

建议安装上Python 2.7,有些可能不装也没事 下载地址 https://www.python.org/downloads/ 安装git 安装React-native需要用到git，如果没有配置git，需要先下载对应的客户端 下载地址：https://git-for-windows.github.io/

第四步：RN环境设置和搭建

1. 下载稳定版 nodejs v5.7.0 Stable下载网站 https://nodejs.org/en/

2. 安装后命令行输入npm测试是否成功

3. React Developer Tools安装

4. 安装React Native。在终端中执行

npm install -g react-native-cli

react-native-cli是一个终端命令，它可以完成其余的设置工作。它可以通过npm安装。刚才这条命令会往你的终端安装一个叫做react-native的命令。这个安装过程你只需要进行一次。

然后安装Yarn

npm install yarn -g

三、创建并启动APP

在启动App之前，我们得创建一个新的项目在终端输入

react-native init 项目名

可能会很慢，等等就好，大概200多M的文件,一次不成功，也可以尝试着多试几次或者直接到GitHub上去下载一个初始化项目。
进入上面使用init命令建立的项目名称目录下 ，新的npm包会包含更新在运行react-nativeinit命令生成的一些动态文件，例如init创建项目的时候会生成iOS和Android的子项目，我们可以通过以下的命令进行获取最新的代码

react-native upgrade

然后执行一下代码来启动项目

react-native run-android

需要耐心等待一段时间，如果出现以下内容则说明运行成功了：

......
:app:transformResourcesWithMergeJavaResForDebug UP-TO-DATE
:app:validateSigningDebug
:app:packageDebug UP-TO-DATE
:app:assembleDebug UP-TO-DATE
:app:installDebug
Installing APK 'app-debug.apk' on 'Custom Phone - 4.4.4 - API 19 - 768x1280 - 4.4.4' for app:debug
Installed on 1 device.

BUILD SUCCESSFUL

Total time: 40.866 secs
Starting the app on 192.168.25.101:5555 (D:\Android\sdk/platform-tools/adb -s 192.168.25.101:5555 shell am start -n com.meituan/.MainActivity)...
Starting: Intent { cmp=com.meituan/.MainActivity }

FEATURED TAGS
React Native